<template>
  <div class="book_shop">
    <!-- 搜索框内容 -->
    <!-- 弹出搜索页面 -->
    <search-com
      v-if="searchShow"
      @change-search-show="changesearchShow"
    ></search-com>
    <van-popup
      round
      :overlay-style="{ background: 'rgba(0,0,0,0.5)' }"
      :overlay="true"
      v-model="showProp"
      :duration="0.8"
    >
      <rotate-card :showProp="showProp" :sex="sex"></rotate-card>
    </van-popup>

    <!-- 搜索框 -->
    <div class="search_bar">
      <div class="sex">
        <div @click="showPopup">
          <span
            :class="['iconfont', sex == 'male' ? 'icon-nan' : 'icon-nv']"
            @click="sex = sex == 'female' ? 'male' : 'female'"
          ></span>
        </div>
      </div>

      <div class="input">
        <span class="fdj iconfont icon-Magnifier"></span>
        <input type="text" readonly @click="searchShow = true" />
      </div>
    </div>
    <div class="tabs">
      <div class="firstLoading" v-if="!tabData">
        <van-loading size="30px" text-size="30px" text-color="#adadad" />loading
      </div>
      <!-- 标签页 -->
      <div v-if="tabData">
        <van-tabs
          v-model="naviIndex"
          @click="clickTabData"
          :line-width="14"
          :line-height="2"
        >
          <van-tab
            :title="nav.name"
            :name="index"
            v-for="(nav, index) in navi"
            :key="nav.id"
          >
            <!-- 轮播图 -->
            <div v-for="(data, index) in tabData" :key="index">
              <template v-if="data.module == 10">
                <swiper-com :banners="data.banners"></swiper-com>
              </template>
              <template v-if="data.module == 49">
                <!-- 轮播图下面的5个标签 -->
                <div class="rank">
                  <div class="ranking_btn">
                    <router-link
                      tag="div"
                      v-for="sort in data.shortCut"
                      :key="sort.msgId"
                      :to="{ name: 'ranking' }"
                      class="box"
                    >
                      <div class="img">
                        <img alt="" v-lazy="sort.cover" />
                      </div>
                      <p>{{ sort.name }}</p>
                    </router-link>
                  </div>
                </div>
              </template>
              <template v-if="data.module == 52">
                <!-- 复用一周强推 -->
                <com-layer-a
                  :recommendBig="data.list[0]"
                  :recommendSmall="data.list.slice(1, 5)"
                  >{{ data.name }}</com-layer-a
                >
              </template>
              <template v-if="data.module == 34">
                <!-- 复用一周强推 -->
                <com-layer-b :rankData="data.list">{{ data.name }}</com-layer-b>
              </template>
              <template v-if="data.module == 36">
                <com-layer :recommend="data.list">{{ data.name }}</com-layer>
              </template>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import SwiperCom from "../../components/banners/SwiperCom.vue";
import ComLayer from "../../components/common/ComLayer.vue";
import ComLayerA from "../../components/common/ComLayerA.vue";
import RotateCard from "../../components/common/RotateCard.vue";
import SearchCom from "../../components/common/SearchCom.vue";
import { getSexNav, getTabData } from "../../api/bookshop";
import ComLayerB from "../../components/common/ComLayerB.vue";
export default {
  components: {
    SwiperCom,
    ComLayer,
    ComLayerA,
    RotateCard,
    SearchCom,
    ComLayerB,
  },
  // components: { RotateCard, SearchCom },
  data() {
    return {
      // vant标签页title
      naviIndex: 0,
      // 男女性别
      sex: "male",
      // 展示弹窗
      showProp: false,
      // 定时器
      timer: null,
      // 搜索页面的展示
      searchShow: false,
      // 获取性别后的导航地址
      navi: [],
      // 获取到tab中的数据
      tabData: [],
    };
  },
  created() {
    this.getNaviUrlFun();
  },
  methods: {
    //1.获取到导航栏接口的数据然后在获取url
    // 2.在通过每个导航的url去获取当页的数据
    // 3.该页的渲染的组件由模块的数字决定按顺序渲染

    getTabDataFun(url) {
      this.tabData = null;
      getTabData(url)
        .then(({ data: res }) => {
          this.tabData = res.data.list;
        })
        .catch((err) => {
          if (err) {
            this.$toast({
              message: "服务器崩溃了",
              position: "middle",
            });
          }
        });
    },
    clickTabData(index) {
      this.getTabDataFun(this.navi[index].url);
    },
    //获取某性别首页导航栏的url
    getNaviUrlFun() {
      let sex = this.sex == "male" ? 1 : 2;
      getSexNav({ gender: sex })
        .then(({ data: res }) => {
          console.log(res);
          this.navi = res.data.navi;

          this.getTabDataFun(this.navi[0].url);
        })
        .catch((err) => {
          if (err) {
            this.$toast({
              message: "服务器崩溃",
              position: "middle",
            });
          }
        });
    },
    //搜索组件展示
    changesearchShow() {
      this.searchShow = false;
    },
    //男女弹出框
    showPopup() {
      this.showProp = true;
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      } else {
        this.naviIndex = 0;
        this.getNaviUrlFun();
        this.timer = setTimeout(() => {
          this.showProp = false;
          clearTimeout(this.timer);
          this.timer = null;
        }, 2000);
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.firstLoading {
  width: 125px;
  height: 125px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // background: #fff;
  color: #fff;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}
/deep/.van-popup {
  .box {
    width: 200px;
    height: 200px;
  }
}
.book_shop {
  padding-bottom: 40px;
  // 搜索框内容
  .search_bar {
    display: flex;
    padding: 13px;
    .sex {
      flex: 0 0 25px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      .iconfont {
        font-size: 17px;
        color: #459ef5;
        &.icon-nv {
          color: #f66756;
        }
      }
    }
    .input {
      position: relative;
      flex: 1;
      width: 100%;
      .fdj {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
      }
      input[type="text"] {
        height: 25px;
        width: 100%;
        border-radius: 12px;
        color: #c3c3c3;
        background-color: #fff;
        border: 0;
        padding: 0 30px;
        box-sizing: border-box;
      }
      margin: 0 4px;
    }
  }
  .tabs {
    // 标签页
    /deep/ .van-tabs {
      .van-tab__text {
        color: #bababa;
        font-size: 13px;
      }
      .van-tab--active {
        .van-tab__text {
          font-size: 18px;
          color: #4e4e4e;
        }
      }
    }
    // 轮播图下面的5个标签
    .rank {
      .ranking_btn {
        border-bottom: 1px solid #eeeeee;
        padding: 13px 60px;
        display: flex;
        justify-content: space-between;
        .box {
          width: 30px;
          height: 50px;
          .img {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
            }
          }
          p {
            font-size: 13px;
            color: #5f5f5f;
            margin-top: 5px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>